<template>
    <div v-loading="loading">
        <el-dialog :title="type == 'create' ? '添加管理员' : '修改管理员'" :visible.sync="visible" width="800px">
            <el-form :model="form" label-width="80px" ref="form">

                <el-form-item label="用户名">
                    <el-input placeholder="请输入用户名" style="width:500px" v-model="form.username"></el-input>
                </el-form-item>

                <el-form-item label="密码">
                    <el-input show-password placeholder="请输入密码" style="width:500px" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input show-password placeholder="请确认密码" style="width:500px" v-model="confirmPassword"></el-input>
                </el-form-item>

                <el-form-item label="昵称">
                    <el-input placeholder="请输入昵称" style="width:500px" v-model="form.nickname"></el-input>
                </el-form-item>

                <el-form-item label="头像">
                    <medium v-model="form.avatar"></medium>
                </el-form-item>
                <!-- 选择角色ID -->
                <el-form-item label="角色ID">
                    <el-select v-model="form.role_id" placeholder="选择角色ID">
                        <el-option v-for="item in roleIdList" :key="item.value" :label="item.name" :value="item.id">
                        </el-option>
                        <el-button v-if="moreBut" class="butBox" type="primary" style="width: 100%;"
                            @click="more">点击加载更多</el-button>
                    </el-select>
                </el-form-item>


                <el-form-item label="状态">
                    <el-switch v-model="disable" @change="disableFun" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" style="width: 470px;margin: 30px auto;" @click="submit">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-card body-style="padding:10px" class="box-card">
            <el-input clearable placeholder="请输入用户名" size="small" style="width: 200px;" v-model="query.username"></el-input>
            <el-input clearable placeholder="请输入昵称" size="small" style="width: 200px;" v-model="query.nickname"></el-input>
            <el-input clearable placeholder="请输入登录IP" size="small" style="width: 200px;"
                v-model="query.login_ip"></el-input>

            <!-- 选择角色ID -->
            <el-select placeholder="选择角色ID" v-model="query.role_id">
                <el-option :key="item.value" :label="item.name" :value="item.id" v-for="item in roleIdList"></el-option>
                <el-button @click="more" class="butBox" style="width: 100%;" type="primary"
                    v-if="moreBut">点击加载更多</el-button>
            </el-select>


            <el-select placeholder="选择状态" v-model="query.disable">
                <el-option :key="item.value" :label="item.name" :value="item.label" v-for="item in typeList"></el-option>
            </el-select>


   
            <el-button @click="page=1;init()" size="small" style="margin-left: 30px;" type="primary">搜索</el-button>
            <el-button @click="toForm()" size="small" type="success" v-permission="['admin','ADMIN_ADD']">添加</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="头像" prop>
                    <template slot-scope="scope">
                        <el-image class="border" style="width: 50px; height: 50px" :src="scope.row.avatar" :preview-src-list="toArray(scope.row.avatar)">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="昵称" prop="nickname"></el-table-column>
                <el-table-column label="用户名" prop="username"></el-table-column>

                <!-- <el-table-column label="分类">
                    <template slot-scope="scope">
                        <span v-if="scope.row.cate">{{scope.row.cate.name}}</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>-->
                <el-table-column label="角色ID" prop="role_id"></el-table-column>

                <el-table-column label="角色" prop="role">
                    <template slot-scope="scope" v-if="scope.row.role">
                        <el-popover :content="scope.row.role.desc" placement="top-start" trigger="hover" width="200">
                            <el-button slot="reference">{{ scope.row.role.name }}</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="登录IP" prop="login_ip"></el-table-column>
                <el-table-column label=" 状态" prop="disable">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.disable == 0 ? 'success' : 'info'">
                            {{ scope.row.disable == 0 ? '正常' : '禁用'
                            }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toForm(scope.row)" size="mini" type="primary" v-permission="['admin','ADMIN_UPDATE']">修改</el-button>
                        <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" type="danger" v-permission="['admin','ADMIN_DELETE']">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>

<script>
import initData from '@/mixins/index'
import medium from '@/components/medium/index'
export default {
    name:"admin-list",
    mixins: [initData],
    components: {
        medium
    },
    data() {
        return {
            submitComplete:false,
            query: {
                username: '',
                nickname: '',
                login_ip: '',
                role_id: '',
                avatar: '',
                disable: '0',
            },
            form: {
                username: '',
                password: '',
                nickname: '',
                role_id: '',
                avatar: '',
                disable: 0
            },
            disable: true,
            visible: false,
            page: 1,
            moreBut: false,
            confirmPassword: '',
            roleIdList: [],
            typeList: [
                {
                    label:'0',
                    name:'正常'
                },
                {
                    label:'1',
                    name:'禁用'
                }
            ],
            worksId:'',
            type: 'create'
        }
    },
    mounted() {
        this.beforeInit()
        this.getRoleId()
    },
    methods: {
        toArray(str){
            const arr = []
            arr.push(str)
           return arr
        },
        
        more() {
            this.page++
            this.getRoleId()
        },
        disableFun(res) {
            console.log(res, '321')
            this.query.disable = res == true ? 0 : 1
        },
        beforeInit() {
            console.log()
            this.url = '/admin/index'
            this.init() //重新请求数据
        },

        setMedium(value) {
            this.form.avatar = value
            console.log("value", value)
        },

        getRoleId() {
            let that = this
            this.$request.get('/admin-role/index', { page: that.page, size: 10 }).then((res) => {
                that.roleIdList = [...that.roleIdList, ...res.items]
                if (res.items.length >= 10) {
                    that.moreBut = true
                }
                console.log('getRoleId', res.items)
            })
        },

        del(id) {
            this.$request.del('/admin/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init()
            })
        },

        toForm(form = null) {
            this.visible = true //打开弹出框
            if (form != null) {
                this.type = 'update'
                this.worksId = form.id
                this.form = form
            } else {
                this.type = 'create'
                this.worksId = ''
                this.form = {
                    username: '',
                    password: '',
                    nickname: '',
                    role_id: '',
                    avatar: '',
                    disable: 0
                }
            }
        },

        closeBox() {
            this.visible = false
            this.form = {
                username: '',
                password: '',
                nickname: '',
                role_id: '',
                avatar: '',
                disable: 0
            }
        },

        //提交
        submit() {
            if(this.submitComplete) return
            this.submitComplete = true
            if (!(this.form.username && this.form.password && this.form.nickname && this.form.role_id)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                this.submitComplete = false
                return
            }

            if (this.form.password != this.confirmPassword) {
                this.$message({
                    message: '两次密码输入不一致',
                    type: 'warning'
                });
                this.submitComplete = false
                return
            }


            if (this.type == 'create') {
                this.$request.post('/admin/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.submitComplete = false
                    this.closeBox()
                    this.init()
                }).catch((error) => {
                    this.submitComplete = false
                });
            } else {
                this.$request.put('/admin/update/' + this.worksId, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.submitComplete = false
                    this.closeBox()
                    this.init()
                }).catch((error) => {
                    this.submitComplete = false
                });
            }
        },
    },
}
</script>

<style lang="scss" scoped>



</style>